<template>
  <!-- 查询 -->
  <div class="query">
    <van-tabs
      v-show="Tabs"
      v-model="activeName"
      background="#8BA693"
      color="#fff"
      title-active-color="#fff"
      title-inactive-color="#DDDEDD"
    >
      <!-- 时间查询 -->
      <van-tab class="queryTab" title="时间查询" name="a">
        <div class="query_content">
          <div class="title">
            <img src="../../assets/image/company.png" />
            <span>记录日期</span>
          </div>
          <div class="title1">
            <!--起始日期 -->
            <div class="query_date">
              <p>起：</p>
              <van-cell
                style="height: 2rem;border-radius:.8rem;box-sizing:border-box;padding:.3rem 20%;"
                :value="date"
                @click="show = true"
                :default-date="timeDefaultShow"
                :min-date="minDate"
                :max-date="maxDate"
              />
              <van-calendar
                id="date"
                color="#71a16d"
                :default-date="timeDefaultShow"
                :min-date="minDate"
                :max-date="maxDate"
                v-model="show"
                @confirm="onConfirm"
              />
            </div>
            <!-- 结束日期 -->
            <div class="query_date">
              <p>始：</p>
              <van-cell
                style="height: 2rem;border-radius:.8rem;box-sizing:border-box;padding:.3rem 20%;"
                :value="date1"
                @click="show1 = true"
              />
              <van-calendar
                id="date1"
                color="#71a16d"
                v-model="show1"
                :default-date="timeDefaultShow"
                :min-date="minDate"
                :max-date="maxDate"
                @confirm="onConfirm1"
              />
            </div>
          </div>
        </div>
        <button @click="onDateClick" class="query_btn">查询</button>
        <!-- 11张表 -->
        <van-cell-group v-if="dateTable" style="width:100%;padding-bottom:3rem">
          <van-cell
            @click="onTableClick(index)"
            v-for="(item,index) in list"
            :key="index"
            :title="item.title"
            :value="item.number"
          />
        </van-cell-group>
      </van-tab>
      <!-- 爱心码查询 -->
      <van-tab class="queryTab" title="爱心码查询" name="b">
        <div class="query_content">
          <div class="title">
            <img src="../../assets/image/loveCode.png" />
            <span>爱心码查询</span>
          </div>
          <input class="title2" v-model="loveCode" type="number" />
        </div>
        <button @click="onLoveClick" class="query_btn">查询</button>
        <!-- ceshi -->
      </van-tab>
    </van-tabs>
    <!-- 爱心码查询步骤条 -->
    <van-steps direction="vertical" :active="stepActive" v-show="stepShow">
      <van-step @click.native="onStepClick(index)" v-for="(step,index) in loveList" :key="index">
        <p>{{step.type}}</p>
        <p>{{step.donateTime || step.inTime ||step.outTime || step.useTime || step.buyTime}}</p>
      </van-step>
      <div style="margin-bottom:3rem"></div>
    </van-steps>
    <!-- 查询组件模板 -->
    <template>
      <!-- 物资捐赠者 -->
      <QMaterialDonation
        :date="date"
        :date1="date1"
        :listPopup="listPopup"
        :queryType="queryType"
        :currentPage="currentPage"
        v-if="QMaterialDonation"
      ></QMaterialDonation>
      <QContribution
        :date="date"
        :date1="date1"
        :listPopup="listPopup"
        :queryType="queryType"
        :currentPage="currentPage"
        v-if="QContribution"
      ></QContribution>
      <!-- 慈善机构 -->
      <QInStorage
        :date="date"
        :date1="date1"
        :listPopup="listPopup"
        :queryType="queryType"
        :currentPage="currentPage"
        v-if="QInStorage"
      ></QInStorage>
      <QOutStorage
        :date="date"
        :date1="date1"
        :listPopup="listPopup"
        :queryType="queryType"
        :currentPage="currentPage"
        v-if="QOutStorage"
      ></QOutStorage>
      <!-- 物资使用者 -->
      <QReceiveMaterial
        :date="date"
        :date1="date1"
        :listPopup="listPopup"
        :queryType="queryType"
        :currentPage="currentPage"
        v-if="QReceiveMaterial"
      ></QReceiveMaterial>
      <QDemandMaterials
        :date="date"
        :date1="date1"
        :listPopup="listPopup"
        :queryType="queryType"
        :currentPage="currentPage"
        v-if="QDemandMaterials"
      ></QDemandMaterials>
      <QPurchaseMaterials
        :date="date"
        :date1="date1"
        :listPopup="listPopup"
        :queryType="queryType"
        :currentPage="currentPage"
        v-if="QPurchaseMaterials"
      ></QPurchaseMaterials>
      <!-- 物资供货商 -->
      <QProductionPlan
        :date="date"
        :date1="date1"
        :listPopup="listPopup"
        :queryType="queryType"
        :currentPage="currentPage"
        v-if="QProductionPlan"
      ></QProductionPlan>
      <QProductStorage
        :date="date"
        :date1="date1"
        :listPopup="listPopup"
        :queryType="queryType"
        :currentPage="currentPage"
        v-if="QProductStorage"
      ></QProductStorage>
      <QSalesOutlet
        :date="date"
        :date1="date1"
        :listPopup="listPopup"
        :queryType="queryType"
        :currentPage="currentPage"
        v-if="QSalesOutlet"
      ></QSalesOutlet>
      <!-- 物流公司 -->
      <QLogisticsCompany
        :date="date"
        :date1="date1"
        :listPopup="listPopup"
        :queryType="queryType"
        :currentPage="currentPage"
        v-if="QLogisticsCompany"
      ></QLogisticsCompany>
    </template>
    <!-- 翻页 -->
    <van-pagination
      @change="onClickPage"
      v-show="currentPageShow"
      v-model="currentPage"
      :page-count="pages"
      mode="simple"
      class="paginations"
    />
  </div>
</template>
<script>
import moment from "moment";

import QMaterialDonation from "../QueryList/QMaterialDonation";
import QContribution from "../QueryList/QContribution";
import QInStorage from "../QueryList/QInStorage";
import QOutStorage from "../QueryList/QOutStorage";
import QReceiveMaterial from "../QueryList/QReceiveMaterial";
import QDemandMaterials from "../QueryList/QDemandMaterials";
import QPurchaseMaterials from "../QueryList/QPurchaseMaterials";
import QProductionPlan from "../QueryList/QProductionPlan";
import QProductStorage from "../QueryList/QProductStorage";
import QSalesOutlet from "../QueryList/QSalesOutlet";
import QLogisticsCompany from "../QueryList/QLogisticsCompany";
import utils from "../../utils/utils";

export default {
  name: "Query",
  data() {
    return {
      listPopup: [
        {
          titleLoading: false //// 查询命中转圈圈2
        },
        {
          loadingText: false // 查询命中否2
        },
        {
          loadingPosition: false //位置3
        },
        {
          verification: false // 验证签名4
        },
        {
          loadingFailed: false // 签名验证成功5
        },
        {
          verificationState: false // 不打勾5
        },
        {
          loadingSigner: false // 签名人6
        }
      ], // 区块链验证动画
      Tabs: true, // query组件显示
      activeName: "a", // 顶部标签栏____时间查询页
      currentPageShow: false, // 分页隐藏
      currentPage: 1, // 底部分页组件____当前页
      pages: "", // 底部分页组件总页数
      queryType: "", //查询类型
      loveCode: "", // 爱心码查询
      typeArr: [
        "物资捐赠",
        "资金捐赠",
        "物资入库",
        "物资出库",
        "领用物资",
        "采购物资",
        "物流公司"
      ],
      loveList: [], // 爱心码查询返回数组
      stepActive: "",
      date: "",
      date1: "",
      show: false,
      show1: false,
      timeDefaultShow: "", //获取当天日期
      minDate: new Date(2015, 0, 1),
      maxDate: new Date(2025, 0, 1),
      dateTable: false, //时间查询列表显示隐藏
      list: [
        {
          title: "物资捐赠者",
          number: ""
        },
        {
          title: "资金捐赠",
          number: ""
        },
        {
          title: "入库物资",
          number: ""
        },
        {
          title: "出库物资",
          number: ""
        },
        {
          title: "领用物资",
          number: ""
        },
        {
          title: "需求物资",
          number: ""
        },
        {
          title: "采购物资",
          number: ""
        },
        {
          title: "生产计划",
          number: ""
        },
        {
          title: "产成品入库",
          number: ""
        },
        {
          title: "销售出库",
          number: ""
        },
        {
          title: "物流公司",
          number: ""
        }
      ], // 时间查询列表
      stepShow: false, //步骤条隐藏
      // 组件
      QMaterialDonation: false, // 物资捐赠者_物资捐赠
      QContribution: false, // 资金捐赠
      QInStorage: false, // 慈善机构_物资入库
      QOutStorage: false, // 慈善机构_资金出库
      QReceiveMaterial: false, // 物资使用者_领用物资
      QDemandMaterials: false, // 物资使用者_需求物资
      QPurchaseMaterials: false, // 物资使用者_采购物资
      QProductionPlan: false, // 物资供货商_生产计划
      QProductStorage: false, // 物资供货商_生产计划
      QSalesOutlet: false, // 物资供货商_销售出库
      QLogisticsCompany: false // 物资供货商_销售出库
    };
  },
  created() {
    //获取当天时间
    this.timeDefaultShow = new Date();
    this.timeDefaultShow.setMonth(new Date().getMonth());
  },
  methods: {
    // 翻页功能
    onClickPage(e) {
      this.currentPage = e;
      this.listPopup[0].titleLoading = false; //// 查询命中转圈圈
      this.listPopup[1].loadingText = false; // 查询命中否
      this.listPopup[2].loadingPosition = false; //位置
      this.listPopup[3].verification = false; // 验证签名
      this.listPopup[4].loadingFailed = false; // 签名验证成功
      this.listPopup[5].verificationState = false; // 不打勾
      this.listPopup[6].loadingSigner = false; // 签名人
    },
    // 选择起始日期
    formatDate(date) {
      return `${moment(date).format("YYYY-MM-DD")}` + " 00:00:00";
    },
    onConfirm(date) {
      this.show = false;
      this.date = this.formatDate(date);
    },
    // 选择结束日期
    formatDate1(date1) {
      return `${moment(date1).format("YYYY-MM-DD")}` + " 23:59:59";
    },
    onConfirm1(date1) {
      this.show1 = false;
      this.date1 = this.formatDate1(date1);
    },
    // 时间查询
    onDateClick() {
      this.queryType = "date";
      //选择时间判断
      if (!this.date) {
        this.$dialog.alert({
          message: "请选择起始日期"
        });
      } else if (!this.date1) {
        this.$dialog.alert({
          message: "请选择结束日期"
        });
      }

      // 列表显示
      if (this.date && this.date1) {
        this.dateTable = true;
      }
      let params = {
        token: JSON.parse(localStorage.getItem("login")).res.token,
        userName: JSON.parse(localStorage.getItem("login")).res.user.userName,
        startTime: this.date,
        endTime: this.date1
      };
      // 物资捐赠者
      this.$api.getDonateProductByTime(params).then(res => {
        this.list[0].number = res.length;
      });

      // 资金捐赠
      this.$api.getDonateCashByTime(params).then(res => {
        this.list[1].number = res.length;
      });

      // 入库物资
      this.$api.getProductInByTime(params).then(res => {
        this.list[2].number = res.length;
      });

      // 出库物资
      this.$api.getProductOutByTime(params).then(res => {
        this.list[3].number = res.length;
      });

      // 领用物资
      this.$api.getUseProductByTime(params).then(res => {
        this.list[4].number = res.length;
      });

      // 需求物资
      this.$api.getNeedProductByTime(params).then(res => {
        this.list[5].number = res.length;
      });

      // 采购物资
      this.$api.getBuyProductByTime(params).then(res => {
        this.list[6].number = res.length;
      });

      // 生产计划
      this.$api.getProducePlanByTime(params).then(res => {
        this.list[7].number = res.length;
      });

      // 产成品入库
      this.$api.getProduceProductInByTime(params).then(res => {
        this.list[8].number = res.length;
      });

      // 销售出库
      this.$api.getProduceProductOutByTime(params).then(res => {
        this.list[9].number = res.length;
      });

      // 物流公司
      this.$api.getShippingProductByTime(params).then(res => {
        this.list[10].number = res.length;
      });
    },
    // 显示指定列表
    onTableClick(index) {
      this.pages = this.list[index].number; //通过number显示查询到的分页总数
      this.currentPageShow = true; //底部分页显示
      this.Tabs = false; // 查询页隐藏
      switch (index) {
        case 0:
          this.QMaterialDonation = true;
          break;
        case 1:
          this.QContribution = true;
          break;
        case 2:
          this.QInStorage = true;
          break;
        case 3:
          this.QOutStorage = true;
          break;
        case 4:
          this.QReceiveMaterial = true;
          break;
        case 5:
          this.QDemandMaterials = true;
          break;
        case 6:
          this.QPurchaseMaterials = true;
          break;
        case 7:
          this.QProductionPlan = true;
          break;
        case 8:
          this.QProductStorage = true;
          break;
        case 9:
          this.QSalesOutlet = true;
          break;
        case 10:
          this.QLogisticsCompany = true;
          break;
      }
    },
    // 爱心码查询
    onLoveClick() {
      this.queryType = "love";
      this.Tabs = false; // query组件隐藏
      this.stepShow = true; //步骤条显示
      // 参数
      let params = {
        token: JSON.parse(localStorage.getItem("login")).res.token,
        userName: JSON.parse(localStorage.getItem("login")).res.user.userName,
        donateId: this.loveCode
      };
      // 封装7个爱心码查询接口
      utils.requireLoveCode(params).then(res => {
        localStorage.setItem(
          "requireLoveCode",
          JSON.stringify({
            res
          })
        );
        for (let i in res) {
          for (let j in res[i]) {
            res[i][j].type = this.typeArr[i];
            this.loveList.push(res[i][j]);
          }
        }

        // 按照时间排序
        this.loveList.sort((a, b) => {
          if (a.createTime > b.createTime) return 1;
          else return -1;
        });
        console.log("loveList：", this.loveList);
        this.loveList.forEach(item => {
          // for (let key in item){
          //   if (key == "donateTime" || key == "inTime" || key == "outTime" || key == "useTime" || key == "buyTime"){
          //     console.log("time in key")
          //     item[key] = moment(item[key]).format("YYYY-MM-DD HH:mm:ss");
          //   }
          // }
          // 显示时间格式
          for (let key in item) {
            if (key.split("Time").length > 1) {
              item[key] = moment(item[key]).format("YYYY-MM-DD HH:mm:ss");
            }
          }
        });
      });
    },
    onStepClick(index) {
      let idxType = this.loveList[index].type;
      this.stepActive = index;
      console.log("stepActive", this.stepActive);
      this.stepShow = false;
      switch (idxType) {
        case "物资捐赠":
          this.QMaterialDonation = true; // 物资捐赠者_物资捐赠
          break;
        case "资金捐赠":
          this.QContribution = true; // 资金捐赠
          break;
        case "物资入库":
          this.QInStorage = true; // 慈善机构_物资入库
          break;
        case "物资出库":
          this.QOutStorage = true; // 慈善机构_资金出库
          break;
        case "领用物资":
          this.QOutStorage = true; // 慈善机构_资金出库
          break;
        case "采购物资":
          this.QPurchaseMaterials = true; // 物资使用者_采购物资
          break;
        case "物流公司":
          this.QLogisticsCompany = true; // 物资供货商_销售出库
          break;
      }
    }
  },
  components: {
    QMaterialDonation,
    QContribution,
    QInStorage,
    QOutStorage,
    QReceiveMaterial,
    QDemandMaterials,
    QPurchaseMaterials,
    QProductionPlan,
    QProductStorage,
    QSalesOutlet,
    QLogisticsCompany
  }
};
</script>
<style>
@import "../../assets/css/Query.css";
</style>